<template>
  <view class="order-list-container">
    <view class="header-wrapper">
      <view class="tabs">
        <view v-for="item in tabNavs" :key="item.id" class="item" :class="{'active': active == item.id}" @click="getActive(item.id)">{{item.name}}</view>
      </view>
      <view v-if="active != 4" class="tags">
        <view class="item" :class="{ active: payload.status == '' }" @click="updateStatus('')">全部</view>
        <view class="item" :class="{ active: payload.status == '2' }" @click="updateStatus('2')">待付款</view>
        <view class="item" :class="{ active: payload.status == '1' }" @click="updateStatus('1')">待入住</view>
      </view>
      <view v-if="active == 4" class="tags">
        <view v-for="item in rent.tabs" class="item" :class="{ active: payment_status == item.id }" @click="updateStatus1(item.id)">{{item.name}}</view>
      </view>
    </view>
    
    
    <view v-if="active != 4" class="order-list-wrapper">
      <view v-for="(item,index) in data" :key="index" class="item">
        <view class="head">
          <view class="left" @click="skipDetail(item)">
            <image class="icon" src="/static/icon/order-tag.png"></image>
            <view class="name f30 bold">酒店</view>
          </view>
          <view class="right">
            <view class="status f24">{{item.status_text}}</view>
            <view class="line"></view>
            <image class="icon" src="/static/icon/remove-btn.png"></image>
          </view>
        </view>
        <view class="content" @click="skipDetail(item)">
          <view class="t1 f30 bold">{{item.hotel.hotel_name}}</view>
          <view class="t2 f24">{{item.hotel.address}}</view>
          <view class="t2 f24">{{item.start_time}} 至 {{item.end_time}} · {{item.day_text}} · {{item.room_type.name}}</view>
        </view>
        <view class="foot u-flex u-row-center">
          <view class="pay f24 zb-btn" v-if="item.status == 4" @click="getShowCart(item.id)">评价</view>
          <view class="pay f24">在线付 <text class="bold f30">￥{{item.pay_price}}</text></view>
          <!-- <view class="btn">去付款</view> -->
        </view>
      </view>
    
      <zj-empty v-if="data.length === 0" top="18vh"></zj-empty>
    </view>
    <!-- 长短租 -->
    <view class="box rent-list" v-else>
      <view v-for="(item, index) in rent.list" :key="index" class="item ">
        <view class="u-flex u-col-center u-row-between status-box">
          <view class="status" style="font-weight: normal;" :class="item.payment_status == 1 ? 'u-error': item.payment_status == 2 ? 'u-primary' : 'u-555'">
            <template v-if="item.payment_status == 1">待付款</template>
            <template v-else-if="item.payment_status == 2">已支付</template>
            <template v-else-if="item.payment_status == 0">已取消</template>
          </view>
          <view v-if="item.payment_status == 1" class="del-btn" @click="cancelOrder(item.tenancy_order_sn, index)">取消</view>
        </view>
        
        <navigator :url="'/rentHouse/my/orderDetail?id='+item.tenancy_order_sn" class="u-flex u-col-center u-row-between">
          <image v-if="item.picList[0]" :src="http+item.picList[0].image" class="img" mode="aspectFill"></image>
          <view class="div u-flex-1">
            <view class="name">{{item.house_title ? item.house_title : '标题'}}</view>
            <view class="labs u-flex u-flex-wrap">
              <text v-if="item.houseTypeCn" class="lab">{{item.houseTypeCn}}</text>
              <text v-if="item.decorationCn" class="lab">{{item.decorationCn}}</text>
              <text v-if="item.configList && item.configList.length > 0" class="lab">{{item.configList[0].configName}}</text>
            </view>
            <view class="time u-m-b-10">
              <text class="u-tips-color u-font-24">租期：</text>
              <text class="u-font-24">{{item.tenancy_start_time}}</text>
              <text>~</text>
              <text class="u-font-24">{{item.tenancy_end_time}}</text>
            </view>
            <view class="price1">
              <text class="u-tips-color u-font-24">月租：</text>
              <text class="u-font-32">￥{{item.tenancy_price}}</text>
            </view>
          </view>
        </navigator>
        
        
      </view>
      <zj-empty v-if="rent.list.length === 0" top="18vh"></zj-empty>
    </view>
    
    <u-popup v-model="showCart" :popup="false" mode="bottom" border-radius="20" @close="closePup" :closeable="true">
      <view class="paddLR comments">
        <view class="title">评价</view>
        <u-form :model="formData">
          <u-form-item label="评论" prop="content" label-width="80" class="abc">
            <textarea cols="30" rows="5" v-model="formData.content" class="textarea" placeholder="维修描述"></textarea>
          </u-form-item>
          <u-form-item label="图片" prop="house_img_list" label-width="80">
            <u-upload width="150" height="150" ref="uUpload" :fileList="images" @on-uploaded="onUploaded"
              @on-remove="onRemove" :action="uploadurl" :header="header" :form-data="formdata"></u-upload>
          </u-form-item>
          <u-button type="primary" hover-class="none" shape="circle" @click="commentsSubmit">确认提交</u-button>
        </u-form>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { render } from "vue";
  export default {
    data() {
      return {
        tabNavs:[{id:1, name:'酒店'}, {id:2, name:'时租房'}, {id:3, name:'民宿'}, {id:4, name:'长短租'}],
        active:1, //
        payload: {
          page: 1,
          status: ''
        },
        data: [],
        total: 0,
        
        showCart:false,
        formData:{
          orders_id:'',
          content:'',
          images:''
        },
        images:[],
        
        rent:{
          list:[],
          page:1,
          total:0,
          tabs:[
            {id:'', name:'全部'},
            {id:1, name:"待支付"},
            {id:2, name:'已支付'},
            {id:'0', name:'取消'},
          ]
        },
        http:'',
        payment_status:''
      };
    },
    computed: {
      header() {
      	return {
      		token: this.vuex_token || '',
      	};
      },
      formdata() {
      	let multipart = (this.vuex_config.config && this.vuex_config.config.upload.multipart) || '';
      	let isObj = this.$u.test.object(multipart);
      	if (isObj) {
      		return this.vuex_config.config.upload.multipart;
      	}
      	return {};
      },
      uploadurl() {
      	if (!this.vuex_config.upload) {
      		return '';
      	}
      	return this.vuex_config.upload.uploadurl;
      }
    },
    methods: {
      updateStatus1(e){
        this.payment_status = e;
        this.getList4(1)
      },
      // 取消订单
      cancelOrder(id, index){
        uni.showModal({
          title:'温馨提示',
          content:'您确定要取消该笔订单吗？',
          success: (res) => {
            if(res.confirm){
              this.$api.cancelOrderApi({order_no:id}).then(res1=>{
                if(res1.code == 1){
                  uni.showToast({
                    icon:'none',
                    title:"订单取消成功"
                  })
                  const list = JSON.parse(JSON.stringify(this.rent.list))
                  list[index].payment_status = '0';
                  this.rent.list = list;
                }else{
                  uni.showToast({
                    icon:'none',
                    title:res1.msg
                  })
                }
              })
              
            }
          }
        })
      },
      getActive(id){
        this.active = id;
        if(id == 4){
          this.rent.page = 1;
          this.getList4()
        }else{
          this.payload.page = 1;
          this.getList1()
        }
      },
      getList4(type = 0){
        if(type == 1){
          this.rent.list = [];
          this.rent.page = 1;
        }
        this.$api.tenancyOrderListApi({page: this.rent.page, payment_status:this.payment_status}).then(res=>{
          console.log('eeeee', res)
          this.rent.list = this.rent.list.concat(res.data.data);
        })
      },
      // 弹出评价
      getShowCart(id){
        this.formData.orders_id = id;
        this.showCart = true;
      },
      // 评价提交
      commentsSubmit(){
        const data = {
          content: this.formData.content,
          images: this.formData.images.join(','),
          orders_id: this.formData.orders_id
        }
        this.$api.commentAddApi(data).then(res=>{
          if(res.code === 1){
            uni.showToast({
              title:'提交成功',
              icon:'none'
            })
          }
          this.showCart = false;
        })
        console.log(this.formData, '---', data)
        
      },
      // 评价图片
      onUploaded(e, name) {
      	console.log(e, name);
          console.log('images--->',this.images)
          this.formData.images = e.map(item => {
            return item.response && item.response.code === 1 && item.response.data.url ? item.response.data.url : item.url.replace(this.http,'');
          })
          console.log('this.formData.img------------>',this.formData.images)
      },
      // 评价图片删除
      onRemove(index, lists, name) {
      	this.images = lists
      		.map(item => {
      			return item.response.data.url;
      		})
      		.join(',');
      },
      // 关闭评价弹窗
      closePup(){
        this.showCart = false
      },
      
      updateStatus(status) {
        if (this.payload.status != status) {
          this.payload.status = status
          this.loadRes()
        }
      },
      loadRes(reset = true) {
        if (reset) {
          this.payload.page = 1
          this.total = 0
          this.data = []
        } else {
          this.payload.page += 1
        }
        uni.showLoading({
          mask: true,
        })
        if(this.active === 4){
          this.getList4()
        }else{
          this.getList1()
        }
      },
       getList1(){
          // 1是酒店 2：时租 3是名宿
         this.$api.orderListApi({...this.payload, type_id:this.active}).then(res => {
           uni.hideLoading()
           const { total, data } = res.data
           this.data.push(...data.map(v => {
             v.hotel = v.hotel || { hotel_name: '-', address: '-' }
             return v
           }))
           this.total = total
         }).catch(() => {
           uni.hideLoading()
         })
       },
      skipDetail(row) {
        uni.navigateTo({
          url: `/hotel/order/detail?id=${row.id}`
        })
      }
    },
    onLoad(options) {
      this.payload.status = options?.status || ''
      this.active = options.type ? Number(options.type) : 1
      this.loadRes();
      this.http = this.$api.httpUrlApi();
    }
  }
</script>

<style lang="scss" scoped>
.comments{
    padding-bottom: 60rpx;
    .textarea {
      border: 1px solid #ededed;
      padding: 20rpx;
      box-sizing: border-box;
      display: block; margin-bottom: 20rpx;
      width: 100%;
    }
    .title{
      padding: 20rpx 0; font-weight: 32rpx; font-weight: bold;
    }
    
  }
  /deep/.abc .u-form-item__body{align-items: self-start !important;}
  
  
.order-list-container {
  .zb-btn{
    margin: 0 10rpx; padding: 0 10rpx; width: 100rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 26rpx;
    text-align: center;
    // color: #FFFFFF;
    // background: #2A70F9;
    border-radius: 4rpx;
  }
  .header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 9;
    .tabs {
      height: 90rpx;
      @include flex;
      .item {
        flex: 1;
        overflow: hidden;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        font-size: 30rpx;
        color: #3C3D3E;
        font-weight: bold;
        &.active {
          color: #2A70F9;
          position: relative;
          &::after {
            content: '';
            width: 42rpx;
            height: 8rpx;
            background: #2A70F9;
            border-radius: 4rpx;
            position: absolute;
            left: 50%;
            bottom: 6rpx;
            transform: translateX(-50%);
          }
        }
      }
    }
    .tags {
      padding: 30rpx;
      box-sizing: border-box;
      @include flex(row,center,flex-start);
      .item {
        width: 148rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #F7F8F8;
        border-radius: 12rpx;
        font-size: 30rpx;
        text-align: center;
        color: #3C3D3E;
        margin-right: 20rpx;
        &.active {
          color: #2A70F9;
        }
      }
    }
  }
}
.order-list-wrapper {
  padding-top: 210rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  .item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-sizing: border-box;
    margin: 30rpx 0;
    .head {
      @include flex(row,center,space-between);
      margin-bottom: 32rpx;
      .left, .right {
        @include flex(row,center,flex-start);
      }
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
      .name {
        margin: 0 10rpx;
      }
      .status {
        margin-right: 12rpx;
      }
      .line {
        width: 1px;
        height: 20rpx;
        background-color: #3C3D3E;
        margin: 0 10rpx;
      }
    }
    .content {
      padding-left: 50rpx;
      box-sizing: border-box;
      .t2 {
        margin: 14rpx 0;
        color: #999;
      }
    }
    .foot {
      text-align: right;
      @include flex(row,center,flex-end);
      .btn {
        width: 148rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        font-size: 28rpx;
        color: #fff;
        background: #2A70F9;
        border-radius: 32rpx;
      }
    }
  }
}


.rent-list{
  padding-top: 240rpx;
    .item{
      padding: 24rpx; margin-bottom: 30rpx;  border-radius: 16rpx; background-color: #fff;
      .status-box{padding: 0 24rpx 20rpx; border-bottom: 1px solid #ededed; margin: 0 -24rpx 20rpx;}
      .img{border-radius: 16rpx !important; overflow: hidden !important; width: 200rpx; height: 200rpx;}
      .name{font-size: 30rpx; margin-bottom: 14rpx; color: #3C3D3E;}
      // .lab{color: #3C3D3E; margin-bottom: 10rpx;}
      .lab{border-radius: 6rpx; background-color: #ebebeb; font-size: 20rpx; padding: 10rpx 10rpx; line-height: 1; margin-right: 10rpx; margin-bottom: 10rpx;}
      .price1{color: #2A70F9; font-size: 30rpx;}
      .div{margin-left: 30rpx;}
      // .del-btn{padding: 0 20rpx; height: 60rpx; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; min-width: 120rpx;}
    }
  }

</style>
